<template>
    <div class="zhanqi">
        <TopDesc desc="ঋণ পরিশোধের পদ্ধতি"></TopDesc>
        <div class="zq-context">
            <div class="zq-title">এখন পরিশোধ করুন</div>
            <div class="zq-shop">{{ orderInfo.currencyType }} {{ orderInfo.loanAmount }}</div>
            <div class="zq-box">
                <ul class="zq-left">
                    <li>বিলম্বের তারিখ</li>
                    <li>সময়ের এক্সটেনশন</li>
                    <li>বিলম্বের সংখ্যা (সর্বোচ্চ 10000)</li>
                </ul>
                <ul class="zq-right">
                    <li>{{ new Date(orderInfo.endTime).toLocaleString() }}</li>
                    <li>{{ orderInfo.delayTerm }}{{ orderInfo.termUnit }}</li>
                    <li>{{ orderInfo.limitTimes }}</li>
                </ul>
            </div>
        </div>
        <ButtomDesc></ButtomDesc>
        <div class="zq-btn" @click="$router.push('/topay')">আবেদন জমা দিন</div>
    </div>
</template>

<script>
import { zhanqishisuanAPI } from '../../api'
import { jiami, jiemi } from "../../utils/AESKey.js";
export default {
    data() {
        return {
            orderInfo: {}
        }
    },
    methods: {
        //获取展期试算
        async getzhanqi() {
            const f = {
                model: {
                    orderId: this.$store.state.orderId
                }
            }
            const res = await zhanqishisuanAPI(jiami(f))
            try {
                console.log(jiemi(res.data))
                this.orderInfo = jiemi(res.data).model
            } catch (error) {

            }
        }
    },
    created() {
        this.getzhanqi()
    }
}
</script>

<style lang="less" scoped>
.zhanqi {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (80/@a);

    .zq-context {
        width: (330/@a);
        height: (200/@a);
        background: #FFFFFF;
        border-radius: (16/@a);
        margin-top: (12/@a);
        margin-left: (23/@a);
        padding-top: (14/@a);

        .zq-box {
            display: flex;
            justify-content: space-around;
            padding-left: (19/@a);
            padding-right: (19/@a);
            margin-top: (10/@a);

            li {
                margin-bottom: (10/@a);
            }

            .zq-left {
                text-align-last: left;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #2D2D2D;
            }

            .zq-right {
                text-align: right;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #626262;
            }
        }

        .zq-title {
            font-size: (13/@a);
            margin-left: (100/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #262626;
        }

        .zq-shop {
            margin-top: (17/@a);
            margin-left: (70/@a);
            font-size: (33/@a);
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #415AB8;
        }
    }

    .zq-btn {
        width: (330/@a);
        height: (53/@a);
        background: #415AB8;
        border-radius: (10/@a);
        text-align: center;
        line-height: (53/@a);
        font-size: (16/@a);
        font-family: Nirmala UI;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: (23/@a);
    }
}
</style>